import React, { useState, useEffect } from 'react'
import Input from '../common/Input'
import styles from '../../styles/login/verifyInput.scss'
import { IconFont, backIP, axiosConfig } from '../common/config';
import axios from 'axios'

export default function VerifyInput({ type, callback }) {
    const [loading, setLoading] = useState(false);
    const [verifyImg, setVerifyImg] = useState<any>('#')

    const getVerifyInfo = async () => {
        const { data: axiosRes } = await axios.get(`${backIP}/verifyCode`)
        const verifyImg: axiosConfig = axiosRes;
        if (!verifyImg.code) { // 说明code为0，请求正确
            setVerifyImg(verifyImg.data)
        }
    }

    useEffect(() => {
        getVerifyInfo();
    }, [loading])
    return (
        <div className={styles.main}>
            <div className={styles.layout}>
                <div className={styles.iconSection}>
                    <IconFont type='iconyanzhengma' className={styles.icon} />
                </div>
                <Input
                    isPassword={false}
                    style={{
                        width: 200
                    }}
                    type={type}
                    callback={callback}
                    placeholder='不区分大小写'
                />
            </div>
            <div
                dangerouslySetInnerHTML={{ __html: verifyImg }}
                className={styles.verifyImg}
                onClick={() => { getVerifyInfo() }}
            ></div>
        </div>
    )
}
